<template>
  <div class="cap-view">
    <div class="top-nav">
      <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="mes">
        <van-notice-bar mode="closeable">验证码为:123456</van-notice-bar>
    </div>
    <div class="ipt-box">
      <van-password-input
        :value="value"
        :focused="showKeyboard"
        info="请输入验证码"
        :error-info="errorInfo"
        @focus="showKeyboard = true"
      />
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "capView",
  data() {
    return {
      value: "",
      showKeyboard: true,
      errorInfo: '',
    };
  },
  watch: {
    value(value) {
      if (value.length === 6 && value !== '123456') {
        this.errorInfo = '验证码错误';
      } else if (value.length === 6 && value == '123456') {
        this.$router.push({name:'ShopcartView'})
      }
    },
  },
  methods:{
    onClickLeft() {
        this.$router.go(-1)
    },
  },
};
</script>

<style lang="scss" scoped>
.cap-view {
  background-color: #f5f5f5;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
}
::v-deep .van-password-input {
  margin-top: 150px;
}
::v-deep .van-nav-bar__arrow{
    color: #000;
    font-size: 20px;
}
</style>